<template>
  <!-- 背景色盒子,机构详情 -->
  <div style="background-color: #f5f5f5">
    <div class="total">
      <div class="left">
        <div class="top">
          <img
            src="@/static/image/in-organizationDetails/marshalling3.png"
            alt=""
            style="display: block; margin: 0 auto"
          />
          <div class="oDtitle1">
            <div class="oDlogo">
              <img src="@/static/image/in-organizationDetails/qiu.png" alt="" />
              <span class="oDspan1"> 北京天使儿童医院</span>
            </div>
            <div class="oDtext1">
              <span class="rSsapn2"
                ><a-icon type="phone" />&nbsp;&nbsp;010-88888888</span
              >
              <span class="rSsapn2"
                ><a-icon
                  type="environment"
                />&nbsp;&nbsp;朝阳区广渠路大郊亭东200米2号楼</span
              >
            </div>
          </div>
        </div>
        <!-- top完结 -->
        <div style="width: 100%; height: 20px; background-color: #f5f5f5"></div>
        <div class="center">
          <div class="oDtext2">
            <span class="oDspan3"
              >医院简介 
            </span>
            <p class="oDtxt1">
              北京天使儿童医院是一所集医疗、科研、康复、宣教为一体的现代化医院，
              坚持"以科学的精神体现人文关怀"，积极开展多学科联合干预儿童常见病，疑难疾病诊治工作，为患儿提供科学全面的优质诊疗服务，
              形成了一整套服务规范，模式和特色。医院有“优质的医疗服务，优越的就医环境，先进的医疗设备，专业的医护团队”
            </p>
          </div>
          <div class="oDtext2">
            <span class="oDspan3">康复项目</span>
            <!-- 轮播图 -->
            <div class="swiper">
              <!-- 滚动区域 -->
              <div class="contnet">
                <div
                  class="conbox"
                  :style="{ marginLeft: '-' + 240 * swiperIndex + 'px' }"
                >
                  <!-- 每一个 -->
                  <a href="javascript:;" v-for="i in 8" :key="i" :style="note">
                    <img
                      src="@/static/image/in-organizationDetails/rectangle3.png"
                      alt=""
                    />
                  </a>
                </div>
              </div>
              <!-- 左右按钮 -->
              <div class="paging">
                <div
                  class="oDleft"
                  @click="onSwiperTab(-1)"
                  v-if="swiperIndex > -1"
                >
                  <a-icon type="left" />
                </div>
                <div
                  class="oDright"
                  @click="onSwiperTab(1)"
                  v-if="(swiperIndex) => 5"
                >
                  <a-icon type="right" />
                </div>
              </div>
            </div>
          </div>
          <!-- 四张图片 -->
          <div class="oDimage1"><span class="oDspan3">医生团队</span></div>
          <div class="oDimage">
            <ul>
              <li v-for="(item, index) in 4" :key="index" :style="note">
                <hgroup>
                  <span class="oDspan4">朱凤凤</span><a>（主治医师）</a>
                  <p class="gCp1">
                    科室：神经内科<br />
                    简介:
                    擅长脑瘫、脑发育不良、发育迟缓、智力低下、自闭症、抽动症、多动症、学习困难、遗尿病、唐氏综合症等疾病的诊断和治疗。
                  </p>
                </hgroup>
              </li>
            </ul>
          </div>
          <div class="oDimage">
            <ul>
              <li v-for="(item, index) in 4" :key="index" :style="note">
                <hgroup>
                  <span class="oDspan4">朱凤凤</span><a>（主治医师）</a>
                  <p class="gCp1">
                    科室：神经内科<br />
                    简介:
                    擅长脑瘫、脑发育不良、发育迟缓、智力低下、自闭症、抽动症、多动症、学习困难、遗尿病、唐氏综合症等疾病的诊断和治疗。
                  </p>
                </hgroup>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 左右布局 -->
      <div class="right">
        <div class="rsPnav">
          <!-- 固定 -->
          <a-affix :offset-top="top">
            <div
              style="width: 340px; background-color: #fff; padding: 30px 30px"
            >
              <div class="affixDiv">
                <div class="oDtext3">
                  <p class="oDtxt3">医院基本信息</p>
                  <p class="oDtxt4">所属行业：康复机构</p>
                  <p class="oDtxt4">医院规模：100人以下</p>
                  <p class="oDtxt4">联系电话：010-88888888</p>
                </div>
                <!-- 地图区域 -->
                <div class="oDmap">
                  <p class="oDtxt3">地理位置</p>
                  <p class="oDtxt4">所属地区：北京市昌平区大黑山第四个窟窿</p>
                  <img
                    src="@/static/image/in-organizationDetails/map.png"
                    alt=""
                    width="100%"
                  />
                </div>
              </div>
            </div>
          </a-affix>
        </div>
      </div>
      <Tip ref="Tip" :txtnom="txtnm" />
    </div>
    <!-- 背景色盒子 -->
  </div>
</template>

<script>
import Tip from "@/components/news/manyTips.vue";

export default {
  components: {
    Tip,
  },
  data() {
    return {
      note: {
        backgroundImage:
          "url(" +
          require("@/static/image/in-organizationDetails/marshalling8.png") +
          ")",
      },
      //固定
      top: 10,
      bottom: 10,
      swiperIndex: 0,
      txtnm: "这是测试文本",
    };
  },
  methods: {
    onSwiperTab(e) {
      let i = this.swiperIndex + e;
      if (i < 0) {
        i = 5;
      } else if (i > 5) {
        i = 0;
      }
      this.swiperIndex = i;
    },
    childFn() {
      this.$refs.Tip.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
//大盒子页面
.total {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
//左边样式
.left {
  width: 840px;
  float: left;
  // padding: 40px 30px;
  background-color: #fff;
}
.top {
  margin: 0 auto;
  padding: 30px 0px;
}
.oDtitle1 {
  width: 760px;
  height: 60;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
  .oDlogo {
    flex: 1;
  }
}
//center
.center {
  width: 100%;
  padding: 40px 0px;
}
//右边样式
.right {
  float: right;
}
.oDtext3 {
  width: 280px;
  padding: 0px 0px 20px 0px;
  border-bottom: #dedede dashed 1px;
}
.oDmap {
  margin-top: 30px;
}
//txt
.oDtext2 {
  width: 760px;
  margin: 0 auto;
}
.oDtxt1 {
  width: 760px;
  height: 78px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 26px;
  margin-top: 20px;
}
.oDtxt3 {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 18px;
}
.oDtxt4 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 17px;
}
//
.oDimage1 {
  width: 760px;
  margin-top: 30px;
  // height: 230px;
  padding: 0px 40px;
}
//个人照片介绍
.oDimage {
  width: 760px;
  margin-top: 30px;
  height: 230px;
  padding: 0px 40px;
  ul {
    width: 760px;
    li {
      width: 175px;
      float: left;
      height: 220px;
      margin-left: 20px;
      overflow: hidden;
      background-size: 100% 100%;
      &:first-child {
        margin-left: 0px;
      }
      hgroup {
        width: 175px;
        height: 220px;
        padding: 20px 16px;
        background: rgba(0, 0, 0, 0.6);
        position: relative;
        top: 180px;
        transition: all 0.4s ease-in 0s;
      }
    }
    li:hover {
      hgroup {
        position: relative;
        top: 0px;
      }
    }
  }
  .gCp1 {
    size: 12px;
    color: #fff;
    line-height: 22px;
  }
  a {
    color: #fff;
  }
}

//span
.oDspan1 {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-left: 9px;
}
.rSsapn2 {
  height: 12px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 12px;
  display: block;
  margin-top: 16px;
  &:first-child {
    margin-top: 0px;
  }
}
.oDspan3 {
  width: 72px;
  height: 18px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 18px;
}
.oDspan4 {
  // width: 114px;
  height: 20px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
}
.swiper {
  position: relative;
  padding: 30px 0;
  .contnet {
    margin: 0 auto;
    overflow: hidden;
    width: 720px;
    .conbox {
      transition: all 0.5s;
      white-space: nowrap;
      > a {
        width: 220px;
        height: 150px;
        display: inline-block;
        font-size: 0;
        margin: 0 10px;
      }
    }
  }
  .paging {
    .oDleft,
    .oDright {
      // background-color: #f5f5f5;
      width: 40px;
      height: 80px;
      position: absolute;
      top: 56%;
      transform: translateY(-50%);
      cursor: pointer;
      i {
        justify-content: center;
        text-align: center;
        font-size: 40px;
      }
    }
    .oDright {
      right: 0;
      padding-left: 16px;
    }
    .oDleft {
      left: -16px;
    }
  }
}
</style>